@charset "UTF-8";

* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

body {
	overscroll-behavior-y: contain; /* Prevent pull-to-refresh. */
}

.canvas,
.floatingRegion,
.floatingToolbar {
	position: absolute;
	top: 104px; /* Toolbar offset */
	left: 0;
	margin: 20px 16px 48px;
}

	.canvas {
		-ms-interpolation-mode: nearest-neighbor;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: pixelated;
		image-rendering: -moz-crisp-edges;
		image-rendering:   -o-crisp-edges;
		image-rendering:      crisp-edges;
		
		-webkit-transform-origin: 0 0;
		   -moz-transform-origin: 0 0;
		    -ms-transform-origin: 0 0;
		     -o-transform-origin: 0 0;
		        transform-origin: 0 0;
		
		-webkit-transition: top 0.2s linear;
		   -moz-transition: top 0.2s linear;
		    -ms-transition: top 0.2s linear;
		     -o-transition: top 0.2s linear;
		        transition: top 0.2s linear;
	}
	#canvas {
		z-index: 1;
	}
	#preCanvas,
	#gridCanvas {
		z-index: 2;
		touch-action: none;
	}
		#preCanvas.ghost {
			opacity: 0.6;
		}
	#gridCanvas {
		pointer-events: none;
	}
	.floatingRegion,
	.floatingRegion:focus {
		border: 1px solid white;
		outline: 1px dashed black;
		outline-offset: -1px;
		overflow: hidden;
		resize: none;
		pointer-events: none;
		z-index: 2;
	}

.floatingToolbar {
	position: absolute;
	padding: 0;
	z-index: 3;
}
	.floatingToolbar button {
		margin: 0;
		-webkit-border-radius: 2px;
		   -moz-border-radius: 2px;
		        border-radius: 2px;
	}
	.floatingToolbar [role="img"] {
		width: 24px;
		height: 24px;
	}

#cursorCanvas,
#pacManStartSound {
	display: none;
}

#canvas:-webkit-full-screen {
	position: static;
	margin: 0 auto;
	-webkit-transform: scale(1) !important;
	        transform: scale(1) !important;
}
#canvas:-moz-full-screen {
	position: static;
	margin: 0 auto;
	-moz-transform: scale(1) !important;
	     transform: scale(1) !important;
}
#canvas:-ms-fullscreen {
	margin: 0 auto;
	position: static;
	-ms-transform: scale(1) !important;
	    transform: scale(1) !important;
}
#canvas:fullscreen {
	position: static;
	margin: 0 auto;
	transform: scale(1) !important;
}

@media (max-width: 600px) {
	.canvas,
	.floatingRegion {
		top: 96px;
	}
}
